<template>
	 <el-container style="height: 100%;width:100%;padding:0 ;position:fixed">
	 <el-header style="width:100%;padding:0;">
	  <Navbar style="height:60px"></Navbar>
	</el-header>
	
		<el-container>
			<el-aside style="background-color: #fff; width: 30%; margin: 1%; border-radius: 2%;  box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12); padding: 2% 1%;">
			
				<div style="height: 45%; margin-bottom: 2%;">
					<img style="width: 100%;" src="" alt="">
				</div>
				<div style="height: 45%;">
					
					<el-descriptions
					    class="margin-top"
					    title="用户信息"
					    :column="2"
					    :size="size"
					    border
					  >
					    <el-descriptions-item >
					      <template #label >
					        <div class="cell-item">
					          <el-icon :style="iconStyle">
					            <user />
					          </el-icon>
					          用户
					        </div>
				
					      </template>
					      {{datas.username}}
					    </el-descriptions-item>
					    <el-descriptions-item >
					      <template #label>
					        <div class="cell-item">
					          <el-icon :style="iconStyle">
					            <iphone />
					          </el-icon>
					          电话
					        </div>
							
					      </template>
							{{datas.telephone}}
							
					    </el-descriptions-item>
							
					    <el-descriptions-item>
					      <template #label>
					        <div class="cell-item" style="width: 70px;">
					          <el-icon :style="iconStyle">
					            <tickets />
					          </el-icon>
					          当前积分
					        </div>
					      </template>
					    {{datas.auth_level}}
					    </el-descriptions-item>
						
					    <el-descriptions-item>
					      <template #label>
					        <div class="cell-item">
					          <el-icon :style="iconStyle">
					        <Message />
					          </el-icon>
					          邮箱
					        </div>
					      </template>
					     {{datas.email}}
					    </el-descriptions-item>
					  </el-descriptions>
				
				</div>	
			</el-aside>
			<el-main style="background-color: #fff; margin: 1%;  border-radius: 2%;   box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12);" >
				<div style="height: 10%; width: 100%;">
					<div style="display:flex;flex-direction: row; width: 100%;"><img src="/src//assets/exam.png" alt="" style="width: 50px;height: 50px;margin-right: 40%;"><h1 style="font-size: 35px;"><strong>今日试题</strong></h1></div>		
				</div>
				<el-divider content-position="left">今日试卷详情</el-divider>
				<div style="float: left; text-align: left; width: 100%;height: 60%;margin: 2% 0;">
				<el-descriptions
				    title="打卡/答题, 学习两不误~"
				    :column="4"
				    :size="size"
				    direction="vertical"
				    :style="blockMargin"
					v-if="loading"
				  >
				    <el-descriptions-item label="名称">{{datas.name}}</el-descriptions-item>
				    <el-descriptions-item label="创建时间">{{datas.time}} </el-descriptions-item>
				    <el-descriptions-item label="当前状态" :span="2" v-if="datas.status"><el-icon style="color: #00ff08;"><SuccessFilled /></el-icon>已完成</el-descriptions-item>
					<el-descriptions-item label="当前状态" :span="2" v-else><el-icon style="color: #ffc618;"><WarningFilled /></el-icon>未完成</el-descriptions-item>
				    <el-descriptions-item label="标签">
				      <el-tag size="small">每日打卡</el-tag>  <el-tag size="small">答题</el-tag>  <el-tag size="small">学习</el-tag>
				    </el-descriptions-item>
				    <el-descriptions-item label="描述"
				      >{{datas.description}}
				    </el-descriptions-item>	
				  </el-descriptions>
				  <el-empty  v-else :image-size="150" />
				  <el-divider content-position="left">名言语录</el-divider>
				  我学习了一生，现在我还在学习，而将来，只要我还有精力，我还要学习下去。
				  --别林斯基
				</div>
				
		
				<div style="">
					<el-button type="primary" v-if="!datas.status" @click="torpl">开始做题</el-button>
					<el-button type="primary" v-else-if="!loading" @click="torpl('home')">返回首页</el-button>
					<el-button type="primary" v-else @click="torpl('history')">查看试题</el-button>
				</div>
			</el-main>
		  </el-container>
		
	</el-container>
</template>

<script lang="ts" setup>
	
	import Navbar from '@/components/layouts/navbar.vue';
	import { ref,computed,reactive,onMounted } from 'vue'
	import { useRouter } from 'vue-router'
	import moment from 'moment';
	import {ElMessage} from 'element-plus'
	import axios from 'axios';
	const datas = reactive({
		paperid:"31444",
		time:"2023-03-23",
		status:'finished',
		description:'试卷的描述',
		name:'试卷的名字',
		username:'testuser',
		telephone:'19231354571',
		email:'21454@163.com',
		auth_level:'99'
			
	})
	const loading = ref(true)
	const router = useRouter()
	const size = ref('')
	
	const blockMargin = computed(() => {
	  const marginMap = {
	    large: '32px',
	    default: '28px',
	    small: '24px',
	  }
	  return {
	    marginTop: marginMap[size.value] || marginMap.default,
	  }
	})
	const torpl = async (info:any) =>{
		if(info == 'home'){router.push('/home')}
		else if(info =='history'){router.push('/history/list/'+datas.paperid)}
		else{
			router.push({
			name:"daylist",
			params:{
				id:datas.paperid
			}
		})
		}
		
	
	}
	
	const getexainfo = async () =>{
			try {
				const response = await axios.get('/login/v1/examination/paper',{
					 headers: {
						'TOKEN': localStorage['token']
					  },
				})	  
				const data = response.data
				if (data.code == 0) {
					const nowdate = new Date()
					const now = moment(nowdate).format('YYYY-MM-DD')
					const haspaper = false
					for(let i in data.data){
						const date = new Date(data.data[i].post_time)
						const formattedTime = moment(date).format('YYYY-MM-DD')
						
						if(formattedTime==now||(formattedTime==now&&data.data[0].status)){
							datas.paperid = data.data[i].id
							datas.status = data.data[i].status
							datas.name = data.data[i].name
							datas.description = data.data[i].description
							datas.time = formattedTime
							datas.username = localStorage['name']
							datas.telephone = localStorage['TEL']
							datas.email = localStorage['email']
							datas.auth_level = localStorage['point']
							return
							}
						}
					if(!haspaper){
						ElMessage("今日题目暂未发布，请联系管理员")
						loading.value = false
					}
					}
				
					}  catch (error) {
					console.error(error)
				  }
		
	}
	
	onMounted (() =>{
		getexainfo()
	})
	
</script>

<style>
	.el-descriptions {
	  margin-top: 20px;
	}
	.cell-item {
	  width: 50px;
	  display: flex;
	  align-items: center;
	}
	.margin-top {
	  margin-top: 20px;
	}
</style>